<template>
  <div>
    <a-modal v-model:visible="visible">
      <template #title> 供应管理 </template>
      <a-form :model="form" :rules="rules" ref="formRef" @submit="handleSubmit">
        <a-form-item field="product_name_id" label="品名">
          <a-select
            placeholder="请选择品名"
            v-model="form.product_name_id"
            allow-clear
          >
            <a-option
              v-for="(item, i) in productNameList"
              :key="i"
              v-model="item.product_name_id"
              :value="item.id"
              :label="item.manage_product_name"
            ></a-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item field="guige" label="规格">
          <a-input v-model="form.guige" placeholder="请输入规格" />
        </a-form-item> -->
        <a-form-item field="stock_time" label="进货时间">
          <a-date-picker
            show-time
            v-model="form.stock_time"
            placeholder="请选择进货时间"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item field="gonghuo_id" label="供货商">
          <a-select
            placeholder="请选择供货商"
            v-model="form.gonghuo_id"
            allow-clear
          >
            <a-option
              v-for="(item, i) in GonghuoList"
              :key="i"
              v-model="item.id"
              :value="item.id"
              :label="item.manage_gonghuo_name"
            ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="num" label="数量">
          <a-input-number v-model="form.num" placeholder="请输入数量" />
        </a-form-item>
        <a-form-item field="address_id" label="存放地点">
          <a-select
            placeholder="请选择存放地点"
            v-model="form.address_id"
            allow-clear
          >
            <a-option
              v-for="(item, i) in addressList"
              :key="i"
              v-model="item.id"
              :value="item.id"
              :label="item.manage_address"
            ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="house_id" label="库管">
          <a-select
            placeholder="请选择库管"
            v-model="form.house_id"
            allow-clear
          >
            <a-option
              v-for="(item, i) in houseList"
              :key="i"
              v-model="item.id"
              :value="item.id"
              :label="item.house_name"
            ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="remarks" label="备注">
          <a-input v-model="form.remarks" placeholder="请输入备注" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" @click="saveManageInfo">确定</a-button>
      </template>
    </a-modal></div
  >
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { saveManage } from '@/api/manage';
import { Message } from '@arco-design/web-vue';

const visible = ref(false);
const formRef = ref(null)
const props = defineProps({
  productNameList: { type: Array, default: () => [] },
  houseList: { type: Array, default: () => [] },
  GonghuoList: { type: Array, default: () => [] },
  addressList: { type: Array, default: () => [] },
  getManageList: { type: Function, default: () => {} }
});

const form = reactive({
  id:"",
  product_name_id: '', // 品名id
  // guige: '', // 规格
  stock_time: '', //进货时间
  gonghuo_id: '', //供货商id
  num: '', //数量
  address_id: '', //库房id
  house_id: '', // 库管id
  remarks: '', // 备注
});
const saveManageInfo = () => {
  formRef.value.validate().then(async (res) => {
    if (res === undefined) {
      const { data, code, message } = await saveManage(form);
      Message.success(message);
      if (code === 200) {
        props.getManageList();
        visible.value = false;
        formRef.value.resetFields();
      }
    }
  });
}
const rules = {
  product_name_id: [
    {
      required: true,
      message: '请选择品名',
    },
  ],
  // guige: [
  //   {
  //     required: true,
  //     message: '请输入规格',
  //   },
  // ],
  stock_time: [
    {
      required: true,
      message: '请选择进货时间',
    },
  ],
  gonghuo_id: [
    {
      required: true,
      message: '请选择供货商',
    },
  ],
  num: [
    {
      required: true,
      message: '请输入数量',
    },
  ],
  address_id: [
    {
      required: true,
      message: '请选择存放地点',
    },
  ],
  house_id: [
    {
      required: true,
      message: '请选择库管',
    },
  ],
};
const openDialog = (record) => {
  if(record && record.id) {
    form.id = record.id;
    form.product_name_id = record.product_name_id;
    // form.guige = record.guige;
    form.stock_time = record.stock_time;
    form.gonghuo_id = record.gonghuo_id;
    form.num = record.num;
    form.address_id = record.address_id;
    form.house_id = record.house_id;
    form.remarks = record.remarks;
  } else {
    formRef.value.resetFields();
  }
  visible.value = true;
};

defineExpose({
  openDialog,
});
</script>

<style scoped>
</style>